The Note of Building Blog

GitHub+Hexo的方式可以避免网站备案,节省购买云主机和服务器的开支,实在是部署上线自己博客的最佳方式。

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Preface:


 搭建的过程并非一帆风顺,而这些总是要自己做过了才会知道。站着说话相比是十分轻松的,弯着腰做事的才会体会得到你未曾经历的滋味。

搭建步骤:

  • GitHub创建仓库
  • 安装Git
  • 安装Node.js
  • 安装Hexo
  • 绑定GitHub,网站推送
  • 个性化配置
  • 发表文章

    GitHub创建仓库

     首先,登录GitHub仓库,创建新的仓库,名字以XXX.github.io为标准,XXX就是GitHub的账户名。比如说我的dukeohu.github.com

    安装Git

    Git是开源的分布式版本控制系统,用于快速高效地处理项目文件。本地搭建好网站,需要同步网站至Github上,就需要Git进行处理。下载Git推荐从官网下载:Git-Download,我的机子是64位便选择了64的程序进行安装,安装完成后需要进行Git与Github绑定操作。
    首先右键打开Git,配置user.name和user.email信息:
    1
    2
    git config --global user.name "GitHub账户名"
    git config --global user.email "GitHub注册邮箱"
    生成SSH密钥文件:
    1
    ssh-keygen -t rsa -C "GitHub注册邮箱"
    然后找到生成的.ssh目录中id_rsa.pub密钥,复制全部内容粘贴到Github的Setting中SSH Keys中:
    最后,在Git Bash中检测GitHub的公钥是否设置成功,输入ssh git@github.com:
    如果和以上返回的信息相同,说明我们的安装成功。这种方式可以避免每次都输入Github的密码,在我们电脑上存储的是Git私钥,Github上存储的是Git公钥,采用非对称加密方式。

    安装Node.js

    Hexo框架基于Node.js,所以我们首先需要下载Download|Node.js,安装完成后在cmd命令行中输入node-v和npm -v查看是否返回版本信息:

    安装Hexo

    Hexo安装需要先创建我们放置博客的目录,在CMD命令行中进入该目录,使用npm命令安装Hexo,输入:(最好挂个梯子)
    1
    npm install -g hexo-cli
    等待安装完成后,初始化博客,输入:
    1
    hexo init blog
    该命令会在我们的博客目录下创建一个blog目录,里面包含整个博客的代码。
    此时在blog目录下按输入顺序输入以下三条命令:
    1
    2
    3
    hexo new test
    hexo g
    hexo s
    便可以生成网站预览,输入localhost:4000便可以查看我们生成的网站,且网站中会包含一篇标题为test的文章。
    hexo new "文章名" --新建文章
    hexo g ---生成hexo内容,一般第一安装时使用
    hexo s ---启动本地服务预览
    hexo d ---部署至Github中去

    hexo server -p 端口 ---自定义本地端口,注意不会修改Github中访问的80端口,这个80端口是无法修改的
    hexo server -i IP地址 ---自定义IP

    绑定GitHub,网站推送

    此时本地网站已经部署完毕了,我们需要将其推送至Github中去,但在这之前我们需要先修改站点的配置文件,位于blog即我们初始化的博客目录中,修改_config.yml文件:
    保存该站点配置文件。
    该步骤的目的在于给hexo d 命令进行配置,让hexo知道我们将会把博客部署在Github的那个仓库下。然后安装Git部署插件,在我们初始化的博客目录blog下输入该命令:
    1
    npm install hexo-deployer-git --save

    然后我们在博客目录blog下再次输入以下三条命令:

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    等待命令完成后,打开浏览器输入https://dukeohu.github.io就可以看到我的博客已经上线了,可以在网络上被访问了。

    个性化配置

    感觉Hexo的默认主题自己难以接受,可以尝试换换口味哈,主题传送门如下: Thems 找到相应的主题后,在CMD命令行中进入blog博客目录,以next主题为例执行以下命令:
    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    然后打开站点的_config.yml配置文件,修改主题为next,注意前面有空格: 最后进入,themes/next文件夹找到主题配置文件_config.yml,找到scheme settings设置next的样式,选择自己喜欢的: next主题有三种样式,可以自行选择喜欢的(#是注释符),选好后再次部署网站(修改文章等会自动实施修改,但是主题等需要重新生成),hexo g,hexo d 查看效果即可。

    发表文章

    经过以上的配置后,基本上就可以开始你的写作之旅了。如果还需要更加详细的Hexo使用方法,可以到: 详细文档|Hexo进行深入学习。
    Hexo支持使用Markdown语法进行博客文章撰写,所以推荐先下载一个MarkDown编辑器:MarkdownPad使用免费版,个人就足够使用了。
    安装完成后,我就可以使用这个编辑器进行语法学习了,具体语法参考: MarkDown语法学习
    这种方法最大的好处就是可以实时预览自己的文章样式,十分便利。
    通过以上的学习,我们就可以利用hexo书写自己的文章了。
    首先开始发布上线博客文章,在CMD命令行中进入blog博客目录下输入:
    1
    hexo n "博客文章名字"
    此时在blog目录下你会发现source文件夹的_post文件夹中出现了文章名字.md文件,使用之前下载的MarkDown编辑器打开,就可以开始书写你的博文了。
    写好文章后,想要本地预览一下,在博客blog目录下输入hexo s即可本地查看,确认无误后使用hexo d部署至你的github仓库,就可以网络访问你写的博文了。

    致谢

    说实话第一次搭建博客这么快就上线了,并写下记录搭建过程的博文,我用了三天。没有网络上众多大佬的帮助是不可能这么迅速的。搭建过程更加详细的步骤可以看看一个大佬的知乎文章: GitHub+Hexo 搭建个人网站详细教程